<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Create a heatmap layer</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="lib/mapbox-gl2.6.1.css" rel="stylesheet">
    <script src="lib/mapbox-gl2.6.1.js"></script>
    <script src="lib/jquery-3.6.0.min.js"></script>
    <script src='lib/mapbox-gl-language.js'></script>
    <script src="lib/dat.gui.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        /** 点图层，全省的话做到村级。 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiaG91eGlleXUiLCJhIjoiY2pldjE5amU3NndzeDM5bzd5bm9ncDgycyJ9.j1F-Lgid3L5k2Abm8_xTeQ';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [117.125829, 36.656704],
            zoom: 8
        });

        map.on('load',async () => {
            // Add a geojson point source.
            // Heatmap layers also work with a vector tile source.
            let ip1 = '6ql20nip.ipyingshe.net';
            // let ip1 = '192.168.0.53:8080';
            let level = 'cun'
            let tileurl = `http://${ip1}/geoserver/gwc/service/tms/1.0.0/rp7%3Agv_${level}_pt@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`;

            //查询点图层数据
            let url2 = `http://${ip1}/geoserver/rp7/ows?service=WFS&version=1.0.0&request=GetFeature&outputFormat=application/json&typeName=rp7:gv_${level}_pt&propertyName=geom,f176&format_options=id_policy:reference_no=false`
            // let url2 = `http://${ip1}/features?fields=f176&level=${level}&geotype=point`

            let geores = await $.getJSON(url2);
            console.log(geores)
            map.addSource('ptsource', {
                'type': 'geojson',
                'data': geores
            });


            // map.addSource("ptsource", {
            //     type: "vector",
            //     scheme: "tms",
            //     tiles: [
            //         tileurl
            //     ],
            //     //   promoteId: "gid",
            // });
            let max = 50000;
            map.addLayer(
                {
                    'id': 'cun-heat',
                    'type': 'heatmap',
                    'source': 'ptsource',
                    // "source-layer": `gv_${level}_pt`,
                    'maxzoom': 9,
                    'paint': {
                        // Increase the heatmap weight based on frequency and property magnitude
                        'heatmap-weight': [
                            'interpolate',
                            ['linear'],
                            ['get', 'f176'],
                            0,
                            0,
                            max,
                            1
                        ],
                        // Increase the heatmap color weight weight by zoom level
                        // heatmap-intensity is a multiplier on top of heatmap-weight
                        'heatmap-intensity': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            0,
                            0,
                            12,
                            0.5
                        ],
                        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                        // Begin color ramp at 0-stop with a 0-transparancy color
                        // to create a blur-like effect.
                        'heatmap-color': [
                            'interpolate',
                            ['linear'],
                            ['heatmap-density'],
                            0,
                            'rgba(33,102,172,0)',
                            0.2,
                            'rgb(103,169,207)',
                            0.4,
                            'rgb(209,229,240)',
                            0.6,
                            'rgb(253,219,199)',
                            0.8,
                            'rgb(239,138,98)',
                            1,
                            'rgb(178,24,43)'
                        ],
                        // Adjust the heatmap radius by zoom level
                        'heatmap-radius': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            0,
                            2,
                            9,
                            50
                        ],
                        // Transition from heatmap to circle layer by zoom level
                        'heatmap-opacity': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            7,
                            1,
                            12,
                            0
                        ]
                    }
                },
                'waterway-label'
            );

            map.addLayer(
                {
                    'id': 'cun-point',
                    'type': 'circle',
                    'source': 'ptsource',
                    // "source-layer": `gv_${level}_pt`,
                    'minzoom': 9,
                    'paint': {
                        // Size circle radius by earthquake magnitude and zoom level
                        'circle-radius': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            7,
                            ['interpolate', ['linear'], ['get', 'f176'], 1, 1, max, 4],
                            16,
                            ['interpolate', ['linear'], ['get', 'f176'], 1, 5, max, 50]
                        ],
                        // Color circle by earthquake magnitude
                        'circle-color': [
                            'interpolate',
                            ['linear'],
                            ['get', 'f176'],
                            1,
                            'rgba(33,102,172,0)',
                            2,
                            'rgb(103,169,207)',
                            3,
                            'rgb(209,229,240)',
                            4,
                            'rgb(253,219,199)',
                            5,
                            'rgb(239,138,98)',
                            6,
                            'rgb(178,24,43)'
                        ],
                        'circle-stroke-color': 'white',
                        'circle-stroke-width': 1,
                        // Transition from heatmap to circle layer by zoom level
                        'circle-opacity': [
                            'interpolate',
                            ['linear'],
                            ['zoom'],
                            9,
                            0,
                            10,
                            1
                        ]
                    }
                },
                'waterway-label'
            );
        });
    </script>

</body>

</html>